<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文章列表</title>
		<meta name="description" content="<%= article.briefing %>" />
        <meta name="keywords" content="" />
		<link rel="stylesheet" href="/webSite/css/header-public.css" />
		<link rel="stylesheet" href="/webSite/css/article-details.css" />
		<link rel="stylesheet" href="/webSite/css/popular-article-public.css" />
		<!--[if lt IE 9]>
			<script type="text/javascript" src="/webSite/js/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		<!--头部引用-->
		<% include header-public.html %>
		<!--nav-->
		<% include article-nav.html %>
		<!--内容框架-->
		<div id="content" class="cl">
			<!--left-->
			<div class="left-content pl-20">
				<!--文章-->
				<div class="content-div">
					<h2 class="article-title"><%= article.title %></h2>
					<div class="info">
						<a>发布时间：<%= ejsExtend.getDate(article.releaseTime) %></a>
						<a>作者：<%= article.author %></a>
						<a>来源：<%= article.source %></a>
						<a>评论：<%= article.comment.length %></a>
					</div>
					<!--文章内容-->
					<div id="article-content" class="cl"><%- article.content %></div>
					<!--来源-->
					<% if(article.source == "原创"){ %>
						<div class="source">原创文章，作者：小缘，如若转载，请注明出处：http://www.hxlovexc.com</div>
					<% }else{ %>
						<div class="source">文章来源：<%= article.source %></div>
					<% } %>
					<!--点赞和分享-->
					<!--<div class="btn-div cl">
						<a href="javascript:;" data-type="like" class="like">
							<i class="iconfont">&#xe607;</i>点赞 (50)
						</a>
						<a href="javascript:;" data-type="collection" class="collection">
							<i class="iconfont">&#xe608;</i>收藏 (50)
						</a>
					</div>-->
					<!--分享-->
					<div class="jiathis_style_32x32">
						<a class="jiathis_button_weixin"></a>
						<a class="jiathis_button_cqq"></a>
						<a class="jiathis_button_tsina"></a>
						<a class="jiathis_button_qzone"></a>
					</div>
				</div>
				<!--猜你喜欢-->
				<% if(likeArticle.length){ %>
					<div class="content-div is-like mb-20">
						<h4 class="content-title">猜你喜欢</h4>
						<!--列表-->
						<ul class="is-like-list">
							<% likeArticle.forEach(function(data , index){ %>
							<li class="title">
								<i><%= index+1 %></i>
								<a href="article-details?id=<%= data.id %>"><%= data.title %></a>
								<span class="date"><%= ejsExtend.getDate(data.releaseTime) %></span>
							</li>
							<% }) %>
						</ul>
					</div>
				<% } %>
				<!--评论-->
				<!--发表评论-->
				<div class="content-div mb-20">
					<h4 class="content-title">评论(<%= article.comment.length %>)</h4>
					<!--<div class="comment-info">
					</div>-->
					<div class="textarea">
						<textarea id="comment-textarea"></textarea>
					</div>
					<div  class="comment-submit">
						<div class="comment-btn">提交</div>
					</div>
					<!--列表-->
					<% if(article.comment.length){ %>
						<ul class="comment-list">
							<% article.comment.forEach(function(data){ %>
								<li>
									<div class="user-img">
										<img src="/webSite/images/user-img.jpg">
									</div>
									<div class="comment-content">
										<div class="comment-info">
											<span class="user-name">用户名称</span>
											<span><%= ejsExtend.getDate(data.releaseTime) %></span>
										</div>
										<p><%= data.content %></p>
									</div>
								</li>
							<% }) %>
						</ul>
					<% } %>
					<% if(article.comment.length >= 10){ %>
						<!--加载更多-->
						<div class="add-comment">查看更多评论</div>
					<% } %>
				</div>
			</div>
			<!--right-->
			<div class="right-content">
				<% if(hotArticle.length){ %>
					<!--热门推荐-->
					<div class="content-div popular">
						<h4 class="content-title">热门推荐</h4>
						<ul class="popular-article">
							<% hotArticle.forEach(function(data){ %>
							<li>
								<!--缩略图-->
								<a href="/article-details?id=<%= data.id %>" class="article-img">
									<img src="<%= data.imgSrc %>">
								</a>
								<!--标题-->
								<h3 class="title">
									<a href="/article-details?id=<%= data.id %>"><%= data.title %></a>
								</h3>
								<!--date-->
								<div class="date"><%= ejsExtend.getDate(data.releaseTime) %></div>
							</li>
							<% }) %>
						</ul>
					</div>
				<% } %>
				<div class="ad content-div">
					<img src="/images/article-img.jpg">
				</div>
			</div>
		</div>
		<script type="text/javascript" src="/webSite/js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
		<script type="text/javascript" >
			$(function(){
				var id = "<%- article.id %>",
					data = "",
					//分享
					jiathis_config={
						summary:"",
						shortUrl:true,
						hideMore:true
					};
					var arr = Math.round(Math.random()*9+1);
				$(".comment-btn").click(function(){
					data = {
						connent : $("#comment-textarea").val()
					};
					//请求
					$.post("/setComment" , {id : id , data : data} , function(data){
						if(data.state == "ok"){
							alert(data.message);
						}else{
							alert(data.message);
						}
					},"JSON");
				});
			});
		</script>
	</body>
</html>
